<template>
  <!-- 购买产品 -->
  <div class="produc new">
    <div class="produc-banner"></div>
    <div class="container">
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/39.png" />
            </div>
            <div class="box-940">
              <el-skeleton :rows="30" animated  v-if=" purchasedetails2.length<=0" />
                <div class="box-300-360" v-for="(item,index ) in purchasedetails1">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
        
                            <a :href="item.downUrl" target="_blank" class="purchase-buy">立即购买</a>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/40.png" />
            </div>
            <div class="box-940">
              <el-skeleton :rows="30" animated  v-if=" purchasedetails2.length<=0" />
                <div class="box-300-360" v-for="(item,index ) in purchasedetails2">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
                            <a :href="item.downUrl" target="_blank"   class="purchase-buy">立即下载</a>

                    </div>
                </div>
                
            </div>
        </div>
        <div class="flex-between m40">
            <div class="box-240-360">
              <img src="../assets/static/41.png" />
            </div>
            <div class="box-940">
              <el-skeleton :rows="30" animated  v-if=" purchasedetails2.length<=0" />
                <div class="box-300-360" v-for="(item,index ) in purchasedetails3">
                    <h2>{{ item.title }}</h2>
                    <div class="purchase-cn">
                      <p v-html="item.content"></p>
                    </div>
                    <div class="purchase-list flex-between-center">
                            <a class="purchase-buy-one" href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
                            <a :href="item.downUrl" target="_blank"  class="purchase-buy">联系购买 </a>
                    </div>
                </div>
                
            </div>
        </div>
    </div>

  </div>
</template>

<script>
import api from '../api/index'
export default {
  name: 'purchase',
  data () {
    return {
      produc: '',
      purchasedetails1: '',
      purchasedetails2: '',
      purchasedetails3: '',
    }
  },

  mounted () {
    api.purchaselist().then(res => {
      var data = res.data.data.list
      this.produc = data
      api.purchasedetails({ purchaseId: data[0].id }).then(res => {
        this.purchasedetails1 = res.data.data.list
      })
      api.purchasedetails({ purchaseId: data[1].id }).then(res => {
        this.purchasedetails2 = res.data.data.list
      })
      api.purchasedetails({ purchaseId: data[2].id }).then(res => {
        this.purchasedetails3 = res.data.data.list
      })
    })
  },
  methods: {
  
  }
}
</script>
<style scoped>
.server_hover {
  width: 100%;
  font-size: 0.18rem;
}
</style>
